<template>
  <div class="chart-settings-container">
    <a-form layout="vertical" :model="formState">
      <!-- 基本信息配置 -->
      <a-collapse v-model:activeKey="activeKeys" expand-icon-position="right">
        <a-collapse-panel key="1" header="基本信息">
          <a-form-item label="标题" name="title">
            <a-input v-model:value="formState.title" placeholder="请输入标题" />
          </a-form-item>
          
          <a-form-item label="数值" name="value">
            <a-input-number v-model:value="formState.value" style="width: 100%" :precision="0" :min="0" />
          </a-form-item>
          
          <a-form-item label="数值格式化" name="valueFormatter">
            <a-select v-model:value="formState.valueFormatter">
              <a-select-option value="">不格式化</a-select-option>
              <a-select-option value="thousands">千分位</a-select-option>
              <a-select-option value="percentage">百分比</a-select-option>
            </a-select>
          </a-form-item>
        </a-collapse-panel>
        
        <!-- 样式设置 -->
        <a-collapse-panel key="2" header="样式设置">
          <a-form-item label="标题颜色">
            <color-picker v-model:value="formState.titleColor" />
          </a-form-item>
          
          <a-form-item label="标题大小">
            <a-slider v-model:value="formState.titleSize" :min="12" :max="36" />
            <div class="size-display">{{ formState.titleSize }}px</div>
          </a-form-item>
          
          <a-form-item label="数值颜色">
            <color-picker v-model:value="formState.valueColor" />
          </a-form-item>
          
          <a-form-item label="数值大小">
            <a-slider v-model:value="formState.valueSize" :min="20" :max="100" />
            <div class="size-display">{{ formState.valueSize }}px</div>
          </a-form-item>
          
          <a-form-item label="背景颜色">
            <color-picker v-model:value="formState.backgroundColor" />
          </a-form-item>
          
          <a-form-item label="圆角大小">
            <a-slider v-model:value="formState.borderRadius" :min="0" :max="20" />
            <div class="size-display">{{ formState.borderRadius }}px</div>
          </a-form-item>
        </a-collapse-panel>
        
        <!-- 数据来源 -->
        <a-collapse-panel key="3" header="数据来源">
          <a-form-item label="数据类型">
            <a-select v-model:value="formState.dataSource">
              <a-select-option value="static">静态数据</a-select-option>
              <a-select-option value="api" disabled>API数据（暂未开放）</a-select-option>
            </a-select>
          </a-form-item>
        </a-collapse-panel>
      </a-collapse>
      
      <div class="settings-footer">
        <a-button type="primary" @click="saveSettings">保存设置</a-button>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, defineProps, defineEmits } from 'vue';
import ColorPicker from '../common/ColorPicker.vue';

const props = defineProps({
  chartType: {
    type: String,
    required: true
  },
  chartId: {
    type: String,
    required: true
  },
  chartOptions: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['save']);
const activeKeys = ref(['1']);

// 表单状态
const formState = reactive({
  title: '指标图',
  value: 0,
  valueColor: '#333333',
  valueSize: 60,
  titleColor: '#666666',
  titleSize: 24,
  backgroundColor: '#FFFFFF',
  borderRadius: 8,
  valueFormatter: '',
  dataSource: 'static'
});

// 初始化表单数据
const initFormData = () => {
  if (props.chartOptions) {
    // 合并现有配置
    Object.keys(props.chartOptions).forEach(key => {
      if (key in formState) {
        // 使用类型断言解决TypeScript索引问题
        (formState as any)[key] = (props.chartOptions as any)[key];
      }
    });
  }
};

// 保存设置
const saveSettings = () => {
  const options = {
    title: formState.title,
    value: formState.value,
    valueColor: formState.valueColor,
    valueSize: formState.valueSize,
    titleColor: formState.titleColor,
    titleSize: formState.titleSize,
    backgroundColor: formState.backgroundColor,
    borderRadius: formState.borderRadius,
    valueFormatter: formState.valueFormatter
  };
  
  emit('save', {
    chartId: props.chartId,
    options
  });
};

// 监听配置变化
watch(() => props.chartOptions, () => {
  initFormData();
}, { deep: true, immediate: true });
</script>

<style scoped>
.chart-settings-container {
  padding: 0 10px;
}

.settings-footer {
  padding: 10px 0;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.size-display {
  text-align: right;
  color: #999;
  margin-top: -10px;
}

:deep(.ant-collapse-header) {
  font-weight: 500;
}

:deep(.ant-form-item) {
  margin-bottom: 14px;
}
</style> 